/*
 * @Author: Licia danlyJ_713@163.com
 * @Date: 2024-07-30 09:49:26
 * @LastEditors: Licia danlyJ_713@163.com
 * @LastEditTime: 2024-08-07 18:13:57
 * @FilePath: \qt\src\components\Video\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { memo, useEffect, useRef } from "react";
import flvjs from "flv.js";

interface Props {
  type: string;
  title: string;
  url: string;
}

function Video<Props>(props: Props) {
  const { type, url, title } = props;
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    let flvPlayer;
    setTimeout(() => {
      flvPlayer = flvjs.createPlayer({
        type,
        url,
      });

      flvPlayer.attachMediaElement(video);
      flvPlayer.load();
      flvPlayer.play();
    }, 0);

    return () => {
      flvPlayer && flvPlayer.destroy();
    };
  }, []);

  return (
    <div className="relative">
      <div className="absolute top-0 left-0 bg-cyan-900">{title}</div>
      <video
        className="size-full"
        ref={videoRef}
        style={{ background: '#000' }}
        muted 
      ></video>
    </div>
  );
}

export default memo(Video);
